<!DOCTYPE html>
<!-- saved from url=(0070)http://ehymn.com/details?ssid=Pius&old-pass=87654321&new-pass=12345678 -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Controls</title>
  <!-- <link rel="stylesheet" href="style.css"> -->
  <link rel="icon" href="http://ehymn.com/pius.png" type="image/x-icon">
  <style>

    /* animations */
    body{
    padding:0px;
    margin: 0px;
    background-color: #ff330a;
    /* #6D214F; */
    width:100%;
    height:100vh;
    display: flex;
    justify-content: center;
}
.wrapper{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    width: fit-content;
    height:auto;
}
button{
    width:220px;
    height:80px;
    background: linear-gradient(to left top, #ff775c 50%, #ff5533 50%);
    border-style: none;
    color:#fff;
    font-size: 23px;
    letter-spacing: 3px;
    font-family: 'Lato';
    font-weight: 600;
    outline: none;
    cursor: pointer;
    position: relative;
    padding: 0px;
    margin: 10px;
    overflow: hidden;
    transition: all .5s;
    box-shadow: 0px 1px 2px rgba(0,0,0,.2);
}
button span{
    position: absolute;
    display: block;
}
button span:nth-child(1){
    height: 3px;
    width:200px;
    top:0px;
    left:-200px;
    background: linear-gradient(to right, rgba(0,0,0,0), #f6e58d);
    border-top-right-radius: 1px;
    border-bottom-right-radius: 1px;
    animation: span1 2s linear infinite;
    animation-delay: 1s;
}

@keyframes span1{
    0%{
        left:-200px
    }
    100%{
        left:200px;
    }
}
button span:nth-child(2){
    height: 70px;
    width: 3px;
    top:-70px;
    right:0px;
    background: linear-gradient(to bottom, rgba(0,0,0,0), #f6e58d);
    border-bottom-left-radius: 1px;
    border-bottom-right-radius: 1px;
    animation: span2 2s linear infinite;
    animation-delay: 2s;
}
@keyframes span2{
    0%{
        top:-70px;
    }
    100%{
        top:70px;
    }
}
button span:nth-child(3){
    height:3px;
    width:200px;
    right:-200px;
    bottom: 0px;
    background: linear-gradient(to left, rgba(0,0,0,0), #f6e58d);
    border-top-left-radius: 1px;
    border-bottom-left-radius: 1px;
    animation: span3 2s linear infinite;
    animation-delay: 3s;
}
@keyframes span3{
    0%{
        right:-200px;
    }
    100%{
        right: 200px;
    }
}

button span:nth-child(4){
    height:70px;
    width:3px;
    bottom:-70px;
    left:0px;
    background: linear-gradient(to top, rgba(0,0,0,0), #f6e58d);
    border-top-right-radius: 1px;
    border-top-left-radius: 1px;
    animation: span4 2s linear infinite;
    animation-delay: 4s;
}
@keyframes span4{
    0%{
        bottom: -70px;
    }
    100%{
        bottom:70px;
    }
}

button:hover{
    transition: all .5s;
    transform: rotate(-3deg) scale(1.1);
    box-shadow: 0px 3px 5px rgba(0,0,0,.4);
}
button:hover span{
    animation-play-state: paused;
}
/*                          end of animations                          */

/*                          my css                                     */
.hymns-button, .specials, .play-pause{
   margin-top: 50px;
}
section, .specials-container, .play-pause-container{
    display: flex;
    justify-content: center;
}

main{
    padding: 50px;
    background-color: white;
 
}

/* Dropdown Button */
.dropbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #3e8e41;}

.header {
  overflow: hidden;
  background-color: #f1f1f1;
  padding: 20px 10px;
}

/* Style the header links */
.header a {
  float: left;
  color: black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  line-height: 25px;
  border-radius: 4px;
}

/* Style the logo link (notice that we set the same value of line-height and font-size to prevent the header to increase when the font gets bigger */
.header img.logo {
 width: 100px;
 height: 100px;
}

/* Change the background color on mouse-over */
.header a:hover {
  background-color: #ddd;
  color: black;
}

/* Style the active/current link*/
.header a.active {
  background-color: dodgerblue;
  color: white;
}

/* Float the link section to the right */
.header-right {
  float: right;
}

/* Add media queries for responsiveness - when the screen is 500px wide or less, stack the links on top of each other */
@media screen and (max-width: 500px) {
  .header a {
    float: none;
    display: block;
    text-align: left;
  }
  .header-right {
    float: none;
  }
}
  </style>

  </head>



<body data-new-gr-c-s-check-loaded="14.1079.0" data-gr-ext-installed="">

<main>
    <div class="header">
        <img src="http://ehymn.com/pius.png" href="#default" class="logo">
        <div class="header-right">
          <a href="/">Home</a>
          <a class="active" href="http://ehymn.com/inputs.html">Controls</a>
          <a href="http://ehymn.com/changedetails.html">Change password</a>
        </div>
      </div>
    <section>
        <div class="hymns-button">
            
<button onclick="PlayHymn(&#39;entrance&#39;)">Play entrance hymn
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</button>
<button onclick="PlayHymn(&#39;offertory&#39;)">Play offertory hymn
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</button>
<button onclick="PlayHymn(&#39;communion&#39;)">Play communion hymn
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</button>
<button onclick="PlayHymn(&#39;closing&#39;)">Play  closing hymn
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</button>
</div>

    </section>

<div class="specials-container">
    <div class="specials">
        <div class="dropdown">
            <button class="dropbtn">Our Father</button>
            <div class="dropdown-content">
              <button onclick="PlayHymn(&#39;our father english&#39;)">English</button>
              <button onclick="PlayHymn(&#39;our father latin&#39;)">Latin</button>
            
            </div>
          </div>

          <div class="dropdown">
            <button class="dropbtn">The creed</button>
            <div class="dropdown-content">
                <!-- Change the button style so it is different from the main dropdown -->
              <button onclick="PlayHymn(&#39;creed english&#39;)">English</button> 
              <button onclick="PlayHymn(&#39;creed latin&#39;)">Latin</button>
            </div>

          </div>

          <div class="dropdown">
            <button class="dropbtn">Gloria</button>
            <div class="dropdown-content">
              <button onclick="PlayHymn(&#39;gloria english&#39;)">English</button>
              <button onclick="PlayHymn(&#39;gloria latin&#39;)">Latin</button>
            </div>
          </div>
        
        </div>
</div>
<div class="play-pause-container">
    <div class="play-pause">
        <button onclick="PlayHymn(&#39;play-pause&#39;)">Play/Pause</button>
        <label for="volume">volume</label>
    <input name="volume" type="range" id="volume" max="34" onchange="PlayHymn(this.value)"><span id="vol"></span>
    </div>
</div>
</main>

<script>
var xhttp = new XMLHttpRequest();

//document.querySelector("#vol").innerHTML=range;
function PlayHymn(hymn){
var volume = document.getElementById("volume").value;
xhttp.open("POST","input", true);
xhttp.setRequestHeader("Content-type", "text/plain");
xhttp.send(hymn);
console.log(hymn);
console.log("request successful");
document.querySelector("#vol").innerHTML=volume;
}




</script>

</body><grammarly-desktop-integration data-grammarly-shadow-root="true"></grammarly-desktop-integration></html>
